<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
		<title>疫情分析系统</title>
		<link rel="stylesheet" href="./res/layui/css/layui.css">
		<link rel="stylesheet" href="./res/static/css/index.css">
		<link rel="icon" href="./images/favicon.ico">

		<!-- 引入文件 -->
		<script src="./highCharts/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="./highCharts/highmaps.js" type="text/javascript" charset="utf-8"></script>
		<script src="./highCharts/exporting.js" type="text/javascript" charset="utf-8"></script>
		<script src="./highCharts/drilldown.js" type="text/javascript" charset="utf-8"></script>
		<script src="./highCharts/art-template.js" type="text/javascript" charset="utf-8"></script>
		<script src="./echarts/echarts.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style>
		body {
			background-color: #fdf9fc;
		}

		#container {
			margin-top: 100px;
			width: 50vw;
			height: 90vh;
		}

		h1 {
			font-weight: 700;
			padding: .1rem;
			font-size: 32px;
		}

		.table {
			padding: 32px 20px;
			width: 29vw;
			font-size: 14px;
			text-align: center;
			background-color: #fff;
			box-shadow: 0 0.08rem 0.45rem 0 rgba(221, 221, 238, .69);
			max-height: 450px;
			overflow-y: auto;
		}

		.table .head {
			color: #9b9b9b;
		}

		.table>.tbody:nth-child(2n+1) {
			background-color: #f6f6f8;
		}

		.table .row {
			padding: 15px 0;
			display: grid;
			grid-template-columns: repeat(5, 1fr);
		}
	</style>
	<body>

		<!-- nav部分 -->
		<div class="nav index">
			<div class="nav-logo">
				<a href="./status.html">
					<img src="./res/static/img/logo.png" width="65" style="margin-left: 20px;">
				</a>
			</div>

			<div class="layui-container">
				<div class="nav-list">
					<ul class="layui-nav" lay-filter="" style="margin: 0 -35px;">
						<li class="layui-nav-item"><a href="status.html">疫情现状</a></li>
						<li class="layui-nav-item"><a href="nat.html">核酸检测</a></li>
						<li class="layui-nav-item"><a href="news.html">疫情新闻</a></li>
						<li class="layui-nav-item layui-this"><a href="virus.html">专题展示</a></li>
						<li class="layui-nav-item"><a href="way.html">出行速查</a></li>
						<li class="layui-nav-item"><a href="resident.html">居民上报</a></li>
						<li class="layui-nav-item"><a href="hospital.html">医院速查</a></li>
					</ul>
				</div>
			</div>
		</div>

		<!-- main -->
		<div class="main-news">
			<div class="layui-container">
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
					<legend>新冠疫情实时数据</legend>
				</fieldset>
			<div class="main-news">
				<div class="layui-container">
					<iframe style="width: 100%;height: 900px;" src="https://voice.baidu.com/act/newpneumonia/newpneumonia/?from=osari_aladin_banner"></iframe>
				</div>
			</div>
		</div>



		<!-- footer部分 -->
		<!-- <div class="footer">
			<div class="layui-container">
				<div class="layui-row footer-contact">
					<div class="layui-col-sm6 layui-col-md4 layui-col-lg3">
						<p class="contact-top"><span class="right">疫情信息管理系统 </span></p>
						<p class="contact-bottom"><span class="right"></span></p>
					</div>
				</div>
			</div>
		</div> -->
		<script src="./res/layui/layui.js"></script>
		<script>
			layui.config({
				base: './res/static/js/'
			}).use('firm');

			// 加载数据
			function initTable() {
				$.getJSON('http://lovebridge.migu.cn:18188/api/map?url=http:%2F%2Fgarnetcdn.migu.cn%2Flovebridge.html', function(
					data) {

					//$('.table').append(template('tpl', data.data.country[0].province));
                    $('.table').append(template('tpl', data.data.country[37].province));
					//alert(data.data.country[37].province);
					$.getJSON('https://data.jianshukeji.com/jsonp?filename=geochina/china.json&callback=?', function(mapdata) {
						//let res = data.data.country[0].province;
                        let res = data.data.country[37].province;
						let newData = []
						res.forEach(item => {
							newData.push({
								name: item.na,
								value: parseInt(item.tn.split(',')[0])
							})
						});

						var map = new Highcharts.Map('container', {
							// 标题
							title: {
								text: '',
								y: 45,
								floating: true,
								style: {
									'fontWeight': 'bold',
									'font-size': '24px',
								}
							},

							// 图例
							legend: {
								itemStyle: {
									'fontSize': '12px',
								},
								align: 'left',
								verticalAlign: 'bottom',
								layout: 'vertical',
								floating: true,
								valueDecimals: 0, //图例的小数点
								// 图例默认是圆形的，通过设置如下参数改为长方形，相应文档可以查看legend目录
								symbolRadius: 0,
								symbolWidth: 45,
								symbolHeight: 20,
								itemMarginTop: 10,
								squareSymbol: false,
								y: -150,
								// 通过设置symbolPadding调节图例左边长方形和右边文字的间距
								symbolPadding: 30
							},

							// 地图放大功能
							mapNavigation: {
								enableMouseWheelZoom: true,
								// 通过设置enabled可以使地图具有放大功能
								enabled: true,
								buttonOptions: {
									//点击放大的按钮显示的位置
									verticalAlign: 'bottom'
								}
							},

							//数据范围显示，且显示相应的颜色
							colorAxis: {
								dataClasses: [{
									to: 1,
									color: '#d6d6d6',
								}, {
									from: 1,
									to: 9,
									color: '#f2ab9a',
								}, {
									from: 9,
									to: 99,
									color: '#f96c4e',
								}, {
									from: 99,
									to: 999,
									color: '#f13c10',
								}, {
									from: 999,
									color: '#500b00',
								}],
							},

							//滑过显示的数据
							tooltip: {
								// headerFormat是默认的有显示的格式，所以将它改为空字符串不显示
								headerFormat: '',
								pointFormat: '{point.name}<br/>确诊 {point.value} 例',
								backgroundColor: 'rgba(0,0,0,.5)',
								borderColor: 'null',
								borderRadius: '10',
								style: {
									'color': '#fff',
									'fontSize': '14px',
								}
							},
							series: [{
								data: newData,
								borderColor: '#fff',
								borderWidth: 1.2,
								cursor: 'pointer',
								dataLabels: {
									overflow: 'none',
									crop: 'false',
									align: 'center',
									//enabled为true才能显示地图上你需要显示的数据
									enabled: true,
									//将字体颜色设置为黑色，我是想按数量显示不同的颜色，但是目前未找到方法
									color: '#000',
									//显示数据的格式
									format: '{point.name}<br/>{point.value}',
									style: {
										'fontSize': '14px',
										'text-align': 'center',
										"textOutline": "0px 0px contrast"
									}
								},

								//当鼠标划过时，设置相应区域的颜色
								states: {
									hover: {
										color: '#fce2db'
									}
								},

								mapData: mapdata,
								joinBy: 'name',
								name: '中国地图'
							}]
						});
					});
				});
			}

			initTable();

			// 线型图
			var myECharts = echarts.init(document.getElementById('echarts'));
			$.getJSON('./echarts/list-total.json', function(totalData) {
				var total = totalData;
				$.getJSON('./echarts/list-hubei.json', function(hubeiData) {
					var hubei = hubeiData;
					var timeArr = [];
					var hubeiArr = [];
					var totalArr = [];
					for (var t of hubei.data.list) {
						timeArr.push(t.date);
						hubeiArr.push(t.total.confirm);
					}

					for (var t of total.data.chinaDayList) {
						totalArr.push(t.total.confirm);
					}

					//指定图标的配置项和数据
					var option = {
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'cross',
								crossStyle: {
									color: '#999'
								}
							}
						},
						toolbox: {
							feature: {
								dataView: {show: true, readOnly: false},
								magicType: {show: true, type: ['line', 'bar']},
								restore: {show: true},
								saveAsImage: {show: true}
							}
						},
						legend: {
							data:['全国累计感染','湖北累计感染']
						},
						xAxis: [
							{
								type: 'category',
								data: timeArr,
								axisPointer: {
									type: 'shadow'
								}
							}
						],
						yAxis: [
							{
								type: 'value',
								name: '确诊数',
								min: 0,
								max: 90000,
								interval: 20000,
								axisLabel: {
									formatter: '{value} 例'
								}
							}
						],
						series: [
							{
								name:'全国累计感染',
								type:'line',
								data:totalArr
							},
							{
								name:'湖北累计感染',
								type:'line',
								data:hubeiArr
							}
						]
					};

					//使用刚指定的配置项和数据
					myECharts.setOption(option);
				})
			});
		</script>
	</body>
</html>
